<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vant</title>
		<!-- 有了这个手机端显示就正常了https://www.runoob.com/w3cnote/viewport-deep-understanding.html看结语部分 -->
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
		<!-- 引入样式文件 -->
		<link href="js/index.css" rel="stylesheet">
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="js/vue.min.js"></script>
		<script src="js/vant.min.js"></script>
		<!--    axios-->
		<script src="js/axios-0.18.0.js"></script>
	</head>
	<style>
		.my-swipe .van-swipe-item {
			color: #fff;
			font-size: 20px;
			line-height: 150px;
			text-align: center;
			background-color: #39a9ed;
		}
	</style>
	<body>

		<div id="div">
			<!-- 上方导航栏 -->
			<van-nav-bar title="传智健康" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
				<template #right>
					<van-icon name="ellipsis" size="18" />
				</template>
			</van-nav-bar>
			<!-- 图片轮播图 -->
			<van-swipe :autoplay="3000">
				<van-swipe-item v-for="(item, index) in images" :key="index">
					<img :src="item" width="100%" height="100%" />
				</van-swipe-item>
			</van-swipe>
		
			<!-- 主体内容 -->
			
			<!-- 下方图片 -->
		</div>
	</body>

	<script>
		new Vue({
			el: "#div",
			data: {
				images: [
					'./img/widget-banner_01.png',
					'./img/widget-banner_02.png',
					'./img/widget-banner_03.png',
				],
			},
			methods: {
				onClickLeft() {
					this.$toast('返回');
				},
				onClickRight() {
					this.$toast('按钮');
				},
			},
			create: {

			}
		})
	</script>
</html>
